<template>
  <Dialog ref="dialog" width="800" :title="title">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="auto"
      :rules="rules"
      status-icon
    >
      <el-row class="el-col-24">
        <el-form-item class="form_item el-col-10" label="目录名" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入目录名" />
        </el-form-item>
        <el-form-item
          class="form_item el-col-10 right"
          label="图标"
          prop="icon"
        >
          <el-popover placement="bottom-start" :width="540" trigger="click">
            <template #reference>
              <el-input
                v-model="ruleForm.icon"
                placeholder="点击选择图标"
                @blur="showSelectIcon"
                readonly
              >
                <template #prefix>
                  <svg-icon
                    v-if="ruleForm.icon"
                    :icon-class="ruleForm.icon"
                    class="el-input__icon"
                    style="height: 32px; width: 16px"
                  />
                  <el-icon v-else style="height: 32px; width: 16px">
                    <search />
                  </el-icon>
                </template>
              </el-input>
            </template>
            <icon-select
              ref="iconSelectRef"
              @selected="selected"
              :active-icon="ruleForm.icon"
            />
          </el-popover>
        </el-form-item>
      </el-row>
      <el-row class="el-col-24">
        <el-form-item class="form_item el-col-10" label="规则" prop="url">
          <el-select
            v-model="ruleForm.url"
            placeholder="请选择规则"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="form_item el-col-10 right"
          label="路径"
          prop="path"
        >
          <el-input v-model="ruleForm.path" placeholder="请输入路径" />
        </el-form-item>
      </el-row>
      <el-row class="el-col-24">
        <el-form-item class="form_item el-col-10" label="机构" prop="storeId">
          <el-select
            v-model="ruleForm.storeId"
            filterable
            placeholder="请选择机构"
            style="width: 100%"
          >
            <el-option
              v-for="item in storeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-row>
    </el-form>
    <el-divider />
    <div class="right">
      <el-button class="height40" @click="closeChange">取消</el-button>
      <el-button type="primary" class="height40" @click="submit"
        >提交</el-button
      >
    </div>
  </Dialog>
</template>
<script setup>
import Dialog from '@/components/Dialog/Dialog.vue';
import SvgIcon from '@/components/SvgIcon';
import IconSelect from '@/components/IconSelect';
import { ElMessage } from 'element-plus';
import { customerMenuSave } from '@/api/appv2/appv2';
import { ref } from 'vue';
import { omit } from 'lodash';
const emit = defineEmits(['getMenuConfig']);
let { proxy } = getCurrentInstance();
const { storeList } = defineProps({
  storeList: {
    type: Array,
    default: () => [],
  },
});
const ruleForm = ref({
  name: '',
  icon: '',
  url: '',
  path: '',
  storeId: '',
});
const options = ['Layout'];
const iconSelectRef = ref(null);
const dialog = ref(null);
const title = ref('新增目录');
const rules = {
  name: [{ required: true, trigger: 'blur', message: '请输入目录名称' }],
  icon: [{ required: true, trigger: 'blur', message: '请选择图标' }],
  url: [{ required: true, trigger: 'blur', message: '请输入规则' }],
  path: [{ required: true, trigger: 'blur', message: '请输入路径' }],
  storeId: [{ required: true, trigger: 'blur', message: '请输入机构ID' }],
};

/** 选择图标 */
function selected(name) {
  ruleForm.value.icon = name;
}
/** 展示下拉图标 */
function showSelectIcon() {
  iconSelectRef.value.reset();
}
// 提交
function submit() {
  const params = {
    ...ruleForm.value,
    parentId: '0',
    type: '1',
    permissions: '',
    level: '1',
    iconFont: '',
  };
  proxy.$refs.ruleFormRef.validate((valid) => {
    // 通过 omit 返回一个新的对象
    if (valid) {
      customerMenuSave(omit(params, ['children'])).then((res) => {
        if (res.code === 20000) {
          ElMessage.success('操作成功');
          dialog.value.closeChange();
          emit('getMenuConfig');
        }
      });
    } else {
      ElMessage.warning('请完善信息');
    }
  });
}
// 打开弹窗
function openchange(val) {
  if (val) {
    title.value = '编辑目录';
    ruleForm.value = val;
  } else {
    title.value = '新增目录';
    ruleForm.value = [];
  }
  dialog.value.openChange();
}
// 关闭弹窗
function closeChange() {
  dialog.value.closeChange();
}
defineExpose({
  openchange,
});
</script>
<style>
.form_item {
  margin-bottom: 20px !important;
}

.right {
  margin-left: 40px;
}
.icon {
  display: flex;
  align-items: center;
}
</style>
